<template>
    <div class="detail">
        <div class="box">
            <div class="logo">
                <img src="@/assets/mhdlogo.png" alt="" />
            </div>
            <ul>
                <router-link tag="li" to="/home/commend">推荐<span></span></router-link>
                <router-link tag="li" to="/home/ranking">排行<span></span></router-link>
                <router-link tag="li" to="/home/classify">分类<span></span></router-link>
            </ul>
            <div class="logo_search">
                <div @click="search" class="search"><van-icon name="search" /></div>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {};
    },
    methods: {
        search() {
            this.$router.push({ path: "/search" });
        },
    },
};
</script>

<style lang="scss" scoped>
.detail {
    padding: 0 0.9375rem;
    .box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 2.5rem;
        margin-bottom: 0.9375rem;
        img {
            width: 1.5625rem;
            height: 1.5625rem;
            margin-right: 0.625rem;
        }
    }
    .logo_search {
        display: flex;
    }
    .search {
        display: flex;
        align-items: center;
        font-size: 1.25rem;
    }
    ul {
        width: 100%;
        height: 2.5rem;
        display: flex;
    }
    li {
        color: #3c3c3c;
        transition: all 0.1s;
        position: relative;
        height: 2.5rem;
        line-height: 2.5rem;
        margin-right: 1.25rem;
        font-size: 1.125rem;

        &.router-link-exact-active {
            font-size: 1.375rem;
            color: #c0392b;
            span {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 0;
                height: 3px;
                border-radius: 0.625rem;
                width: 1.25rem;
                display: block;
                background-color: #c0392b;
            }
        }
    }
}
</style>
